<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>良品</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <!-- 设置页面不缓存 -->
    <!-- <meta http-equiv="pragma" content="no-cache"> -->
    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileColor" content="#0e90d2">
    <link rel="stylesheet" href="css/amazeui.min.css">
    <link rel="stylesheet" href="css/app.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/modernizr.js"></script>
    <script src="js/amazeui.min.js"></script>
    <script src="js/jsAddress.js"></script>
    <style>
        .nav-bar {
            background-color: #fafafa;
        }

        .nav-bar a {
            border-top: 1px solid #bfbfbf;
            border-right: 1px solid #bfbfbf;
            color: #4b4b4b;
            font-size: 16px;
        }
    </style>
</head>

<body style="padding-bottom:50px;">
    <div class="inner">
        <div class="address">

            <!-- 地址 有地址的时候显示 -->

            <a href="javascript:;" data-am-modal="{target: '.my-actions'}">
                <div class="auto am-padding-top-lg am-padding-bottom-lg" style="display:flex;">
                    <div style="width:20px;"><img src="images/pic_address.jpg" alt="" style="width:20px;height:23px;"></div>
                    <div style="width:calc(100% - 28px)" class="am-padding-left addres am-padding-right">
                        <div class="am-text-sm col5 am-cf">收货人：<span>李四</span> <span class="am-fr">13524578695</span></div>
                        <p class="am-text-xs am-margin-top-xs am-margin-bottom-xs col6">收货地址：<span>和南城洛阳市洛龙区</span></p>
                    </div>
                    <div style="width:8px;"><img class="am-margin-top-lg" style="width:8px;height:13px;" src="images/pic_du2.jpg" alt=""></div>
                </div>
            </a>


            <!-- <div style="height:50px;cursor: pointer;width:100%;" data-am-modal="{target: '.my-actions1'}">
                <div class="am-btn-group am-btn-group-xs am-text-lg wh100a am-cf  am-padding-left am-padding-right am-padding-top-sm am-padding-bottom-sm" style="position:relative;">
                    <img class="am-margin-right-sm" style="width:25px; height:25px;" src="images/btn_bay2.jpg" alt="">
                     新增地址
                    <img style="position:absolute;top:12px;right:20px;width:10px;height:15px;" class=" am-margin-top-xs"src="images/pic_du2.jpg" alt="">
                </div>
            </div> -->
            <div class="address_borbottom" style="height:3px;"></div>
        </div>

        <!-- 商品介绍 -->
        <div class="am-margin-top-sm bgco1 bor-t1 bor-b1" style="">
            <div style="height:50px;" class="am-text-lg col5 auto am-padding-top-lg">
                <img class="am-fl am-margin-top-xs" style="width:20px;height:20px;" src="images/pic_du1.jpg" alt="">&#X3000;
                良美优品
            </div>
            <div class="am-padding-top-sm am-padding-bottom-sm bor-b1" style="display:flex;height:130px; width:calc(100% - 40px);margin:0 auto;">
                <div class="" style="width:110px;height:110px;">
                    <img style="width:100%;height:100%;" src="images/pic_dulist1.jpg" alt="">
                </div>
                <div style="width:calc(100% - 180px);height:100%;">
                    <p class="am-padding-left-xs am-text-default" style="max-height:77px;overflow: hidden;margin-bottom:5px;color:#333;">
                        充电神器便携手机座充快充苹果ios安卓版本
                    </p>
                </div>
                <div style="width:80px;" class="am-text-right am-text-default">
                    <span class="am-text-sm">￥</span>123
                    <span class="am-margin-top-xl col6" style="display:block">×1</span>
                </div>
            </div>
            <!-- 配送方式  -->
            <div class="am-cf auto bor-b1 " style="height:70px;">
                <span class="am-fl am-text-default " style="line-height:65px;">配送方式</span>
                <div class="am-fr" style=" display:flex;cursor: pointer;">
                    <div class="am-text-right am-margin-right am-margin-top-sm">
                        <div class="col6 am-text-default">免运费</div>
                        <div class="col6">快递发货</div>
                    </div>
                    <div>
                        <img class="am-margin-top-lg" style="width:10px;height:15px;" src="images/pic_du2.jpg" alt="">
                    </div>
                </div>
            </div>
            <!-- 买家留言 -->
            <div class="auto bor-b1" style="height:60px;cursor: pointer;display:flex;">
                <span class=" am-text-default " style="line-height:55px;">买家留言：</span>
                <div class="" style=" display:flex;width:calc(100% - 80px)">
                    <input type="text" class="am-form-field am-radius  am-text-default" placeholder="给商家留言" style="border:none" />
                </div>
            </div>
            <!-- 合计 -->
            <div class="am-cf auto " style="height:60px;">
                <span class="am-fl am-text-default " style="line-height:55px;">合计</span>
                <div class="am-fr">
                    <span style="font-size:18px;color:#ff4243;height:35px;line-height:55px;">
                                <span style="font-size:16px;">￥</span>123.00
                    </span>
                </div>
            </div>
        </div>


        <!-- 优惠 -->
        <div class="bor-t1 bor-b1 bgco1 am-margin-top-sm">
            <div class="am-cf auto " style="height:60px;">
                <span class="am-fl am-text-default " style="line-height:55px;">优惠</span>
                <div class="am-fr am-text-right " style="cursor: pointer;" onclick="promoshow()">
                    <span class=" am-text-default col6" style="line-height:55px;">使用优惠&nbsp;</span>
                    <img class="" style="width:10px;height:15px;margin-top:-3px;" src="images/pic_du2.jpg" alt="">
                </div>
            </div>
        </div>
        <!-- 短信通知收件人 -->
        <div class="bor-t1 bor-b1 bgco1 am-margin-top-sm">
            <div class="am-cf auto " style="height:60px;">
                <span class="am-fl am-text-default " style="line-height:55px;">短信通知收件人</span>
                <div class="am-fr am-text-right">
                    <div class="cb-container">
                        <div class="sliderOne note" style="font-size:12px;">

                            <input type="checkbox" id="sliderOne" checked>
                            <label for="sliderOne"></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 商品金额 -->
        <div class="bor-t1 bor-b1 bgco1 am-margin-top-sm am-padding-top-sm am-padding-bottom-sm">
            <div class="am-cf auto " style="height:30px;">
                <span class="am-fl am-text-default " style="line-height:25px;">商品金额</span>
                <div class="am-fr am-text-right " style="">
                    <span class="col6" style="font-size:18px;height:25px;line-height:25px;">
                        <span style="font-size:16px;">￥</span>123.00
                    </span>
                </div>
            </div>

            <div class="am-cf auto " style="height:30px;">
                <span class="am-fl am-text-default " style="line-height:25px;">商品金额</span>
                <div class="am-fr am-text-right">
                    <span class="col6" style="font-size:18px;height:25px;line-height:25px;">
                        <span style="font-size:16px;">+￥</span>0.00
                    </span>
                </div>
            </div>
        </div>


        <div class=" am-text-center bor-t1 bor-b1 am-margin-top-sm" style="height:50px;line-height:50px;">
            <a style="color:#333;margin-left:5px;" href="">店铺主页</a>
            <a style="color:#333;margin-left:5px;" href="">会员中心</a>
            <a style="color:#333;margin-left:5px;" href="">关注我们</a>
            <a style="color:#333;margin-left:5px;" href="">店铺信息</a>
        </div>
        <div style="height:100px;" class="">
            <div style="height:50px;line-height:65px;" class="am-text-lg col6 am-text-center">
                <img style="width:26px;height:28px;" src="images/logo_l.jpg" alt="">&nbsp;灵一睿
            </div>
            <div class="am-text-center col6 am-text-sm" style="height:50px;line-height:30px;">灵一睿提供技术支持</div>
        </div>
    </div>


    <!-- 优惠码 -->
    <div class="promo_code" style="width:100vw;height:100vh;background-color:#f8f8f8; position:fixed;top:0;z-index:9999;">
        <div class="bgco1 am-padding-top-xs" style="height:50px;">
            <div class="am-input-group auto">
                <input type="text" class="am-form-field" placeholder="请输入优惠码">
                <span class="am-input-group-btn">
                          <button class="am-btn am-btn-default" type="button">兑换</button>
                        </span>
            </div>
        </div>
        <div onclick="promohide()" class="am-text-center bor-t1 bgco1" style="position:fixed;bottom:0;height:50px;line-height:50px;z-index:9999;width:100vw;cursor: pointer;">
            不使用优惠
        </div>
    </div>

    <!-- 选则收货地址 -->
    <div class="am-modal-actions my-actions" id="my-actions" style="background-color:#f9f7f8">
        <form action="" style="width:100%;height:100%;">
            <div class="am-modal-actions-group">
                <ul class="am-list am-list2">
                    <li class="am-modal-actions-header" style="display:flex;padding-left:0;">
                        <div class="am-text-lg col5" style="width:100%">
                            选择收货地址
                        </div>
                        <div class=" am-padding-left-xl" style="width:60px; position:absolute;right:0;
                    top:0;">
                            <a href="javascript:;" class="am-close am-close-alt am-btn-block" data-am-modal-close>&times;</a>
                        </div>

                    </li>
                    <li class="am-g" style="white-space: normal;overflow: visible;">
                        <label class="am-radio am-u-sm-10 am-text-left">
                            <input type="radio" name="radio1" value="" data-am-ucheck style="margin-top:30px;">
                            <p class="am-margin-top-xs am-margin-bottom-xs">张三,123456</p>
                            <p class="am-margin-top-xs am-margin-bottom-xs am-text-xs col6">收货地址：和南城洛阳市洛龙区1</p>
                        </label>
                        <div class="am-u-sm-2 am-margin-top-lg"><img data-am-modal="{target: '.my-actions1'}" style="width:20px;height:20px;" src="images/btn_bay1.jpg"
                                alt=""></div>
                    </li>
                    <li class="am-g" style="white-space: normal;overflow: visible;">
                        <label class="am-radio am-u-sm-10 am-text-left">
                            <input type="radio" name="radio1" value="" data-am-ucheck style="margin-top:30px;">
                            <p class="am-margin-top-xs am-margin-bottom-xs">李四,789987</p>
                            <p class="am-margin-top-xs am-margin-bottom-xs am-text-xs col6">收货地址：和南城洛阳市洛龙区2</p>
                        </label>
                        <div class="am-u-sm-2 am-margin-top-lg"><img data-am-modal="{target: '.my-actions1'}" style="width:20px;height:20px;" src="images/btn_bay1.jpg"
                                alt=""></div>
                    </li>
                    <li class="am-g" style="white-space: normal;overflow: visible;">
                        <label class="am-radio am-u-sm-10 am-text-left">
                            <input type="radio" name="radio1" value="" data-am-ucheck style="margin-top:30px;">
                            <p class="am-margin-top-xs am-margin-bottom-xs">王五,456789</p>
                            <p class="am-margin-top-xs am-margin-bottom-xs am-text-xs col6">收货地址：和南城洛阳市洛龙区3</p>
                        </label>
                        <div class="am-u-sm-2 am-margin-top-lg"><img data-am-modal="{target: '.my-actions1'}" style="width:20px;height:20px;" src="images/btn_bay1.jpg"
                                alt=""></div>
                    </li>

                    <li>
                        <div style="height:50px;cursor: pointer;width:100%;" data-am-modal="{target: '.my-actions1'}">
                            <div class="am-btn-group am-btn-group-xs am-text-sm wh100a am-cf  am-padding-right am-padding-top-sm am-padding-bottom-sm"
                                style="position:relative;">
                                <img class="am-margin-right-sm" style="width:25px; height:25px;" src="images/btn_bay2.jpg" alt="">新增地址
                                <img style="position:absolute;top:12px;right:20px;width:10px;height:15px;" class=" am-margin-top-xs" src="images/pic_du2.jpg"
                                    alt="">
                            </div>
                        </div>
                    </li>
                    <li></li>
                </ul>
            </div>
        </form>
    </div>

    <!-- 添加收货地址 -->
    <div class="am-modal-actions my-actions1" id="my-actions" style="background-color:#f9f7f8">
        <form action="" style="width:100%;height:100%;">
            <div class="am-modal-actions-group">
                <ul class="am-list am-list2">
                    <!-- 标题内容 -->
                    <li class="am-modal-actions-header" style="display:flex;padding-left:0;">
                        <div class="am-text-lg col5" style="width:100%">
                            新建收货地址
                        </div>
                        <div class=" am-padding-left-xl" style="width:60px; position:absolute;right:0;
                            top:0;">
                            <a href="javascript:;" class="am-close am-close-alt am-btn-block" data-am-modal-close>&times;</a>
                        </div>

                    </li>
                    <li class="am-g" style="white-space: normal;overflow: visible;">
                        <div class="am-g" style="height:50px;">
                            <div class="am-u-sm-3 am-text-left am-text-default" style="line-height:50px;">收货人</div>
                            <div class="am-u-sm-9 am-padding-top-sm">
                                <input type="text" style="width:100%;border:0;outline:none;text-indent:12px;" placeholder="名字" />
                            </div>
                        </div>
                    </li>
                    <li class="am-g" style="white-space: normal;overflow: visible;">
                        <div class="am-g" style="height:50px;">
                            <div class="am-u-sm-3 am-text-left am-text-default" style="line-height:50px;">联系电话</div>
                            <div class="am-u-sm-9 am-padding-top-sm">
                                <input type="text" style="width:100%;border:0;outline:none;text-indent:12px;" placeholder="手机或固定电话" />
                            </div>
                        </div>
                    </li>
                    <li class="am-g" style="white-space: normal;overflow: visible;">
                        <div class="am-g" style="height:50px;">
                            <div class="am-u-sm-3 am-text-left am-text-default" style="line-height:50px;">收货人</div>
                            <div class="am-u-sm-9 am-padding-top-sm">
                                <div class="am-u-sm-4 col6"><select style="width:100%;    outline: none;background: transparent;border:0;
                                    -webkit-appearance: none;
                                    -moz-appearance: none;
                                    -o-appearance: none;
                                    appearance: none;" id="cmbProvince"></select></div>
                                <div class="am-u-sm-4 col6"><select style="width:100%;    outline: none;background: transparent;border:0;
                                    -webkit-appearance: none;
                                    -moz-appearance: none;
                                    -o-appearance: none;
                                    appearance: none;" id="cmbCity"></select></div>
                                <div class="am-u-sm-4 col6"><select style="width:100%;    outline: none;background: transparent;border:0;
                                    -webkit-appearance: none;
                                    -moz-appearance: none;
                                    -o-appearance: none;
                                    appearance: none;" id="cmbArea"></select></div>




                            </div>
                        </div>
                    </li>
                    <li class="am-g" style="white-space: normal;overflow: visible;">
                        <div class="am-g" style="height:50px;">
                            <div class="am-u-sm-3 am-text-left am-text-default" style="line-height:50px;">详细地址</div>
                            <div class="am-u-sm-9 am-padding-top-sm">
                                <input type="text" style="width:100%;border:0;outline:none;text-indent:12px;" placeholder="如街道,楼层,门牌号等" />
                            </div>
                        </div>
                    </li>
                    <li class="am-g" style="white-space: normal;overflow: visible;">
                        <div class="am-g" style="height:50px;">
                            <div class="am-u-sm-3 am-text-left am-text-default" style="line-height:50px;">邮政编码</div>
                            <div class="am-u-sm-9 am-padding-top-sm">
                                <input type="text" style="width:100%;border:0;outline:none;text-indent:12px;" placeholder="邮政编码(选填)" />
                            </div>
                        </div>
                    </li>
                    <script type="text/javascript">
                        addressInit('cmbProvince', 'cmbCity', 'cmbArea', '请选择省', '市', '区');
                        addressInit('Select1', 'Select2', 'Select3');
                    </script>
                    <!-- 收货地址 -->

                </ul>
            </div>
            <div class="am-modal-actions-group">
                <button class="am-btn am-btn-secondary am-btn-block" style="background-color: #05bf02;border:1px solid #05bf02">保存</button>
            </div>
        </form>


    </div>
















    </div>



    <footer class="am-g nav-bar" style="height:50px; position:fixed;bottom:0;z-index:999;">
        <form action="" class="" style="width:100%;height:100%;display:flex;">
            <div style="width:calc(100% - 120px); display:flex;">
                <div style="width:100%;">
                    <a class="am-text-right am-text-lg col5 am-padding-right-xs" style="line-height:50px;text-align:center;width:100%;display:block;"
                        href="javascript:;">
                    合计：<span class="am-text-default col4">￥</span><span class="col4">99</span><span class="am-text-sm col4">.00</span>
                </a>
                </div>
            </div>
            <div style="width:120px;line-height:50px;height:55px;">
                <input class="bgco2 bor-2" type="submit" style="text-align:center;width:100%;font-size:16px;color:#ffffff;height:100%;" value="提交订单">
            </div>
        </form>
    </footer>



</body>

</html>
<script>
                        // 显示优惠码
                        function promoshow() {
                            console.log("123")
                            $(".promo_code").css("display", "block");
                        }
                        function promohide() {
                            $(".promo_code").css("display", "none");
                        }

</script>